<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>千锋选课系统</title>
    <style type="text/css">
        select {
            width: 200px;
            height: 350px;
        }

        input {
            position: absolute;
            width: 100px;
            margin-left: -150px;
        }
    </style>
</head>

<body>
    <center>
        <fieldset style="width:800px;">
            <legend>请选择课程</legend>
            <br>
            <select id="leftSelect" multiple="multiple" size="23" style="margin-right:200px;" ondblclick="right();">
                <option>职场新动力英语1</option>
                <option>职场新动力英语2</option>
                <option>职场新动力英语3</option>
                <option>职场新动力数学1</option>
                <option>职场新动力数学2</option>
                <option>职场新动力数学3</option>
                <option>计算机基础</option>
                <option>网页设计</option>
                <option>C语言程序设计</option>
                <option>vue</option>
                <option>react</option>
                <option>uni-app</option>
                <option>node.js/CMS案例</option>
                <option>数据结构与算法</option>
                <option>小程序/计算机视觉/Mybatis</option>
                <option>springMVC/SSH/WebService</option>
                <option>项目实训1</option>
                <option>项目实训2</option>
                <option>项目实训3</option>
            </select>
            <input type="button" value="→ 添加 →" style="margin-top:50px;" onclick="right();">
            <input type="button" value="← 删除 ←" style="margin-top:100px;" onclick="left();">
            <input type="button" value="↑ 上移 ↑" style="margin-top:150px;" onclick="up();">
            <input type="button" value="↓ 下移 ↓" style="margin-top:200px;" onclick="down();">
            <input type="button" value="取消左选" style="margin-top:250px;" onclick="cancelLeft()	;">
            <input type="button" value="取消右选" style="margin-top:300px;" onclick="cancelRight();">

            <select id="rightSelect" multiple="multiple" size="23" ondblclick="left();" onclick="cancelLeft();">
            </select>
            <br>
            <br>
        </fieldset>
    </center>

    <script>
        // 获取元素 

        var leftEle = document.getElementById('leftSelect');
        var rightEle = document.getElementById('rightSelect');


        // 获取选中的选项 

        // console.log(left.options); // 获取所有的选项 伪数组 
        // for(var i=0;i<left.options.length;i++){
        //     console.log(le dft.options[i].selected); // 输入是否被选中 
        // }

        // console.log(left.options[0].selected);


        function right() {
            // 父节点.appendChild(子节点);

            // for (var i = 0; i < leftEle.options.length; i++) {
            //    if(leftEle.options[i].selected){
            //         rightEle.appendChild(leftEle.options[i]);
            //         i--;
            //    }
            // }

            for (var i=leftEle.options.length-1;i>=0; i--) {
               if(leftEle.options[i].selected){
                    rightEle.appendChild(leftEle.options[i]);
               }
            }


        }


        function left(){
            for (var i=rightEle.options.length-1;i>=0; i--) {
               if(rightEle.options[i].selected){
                    leftEle.appendChild(rightEle.options[i]);
               }
            }
        }



        function up(){
            // 获取选中的元素 

            // 父节点.insertBefore(子节点,谁的前面);


            // 同级别的前一个元素节点 
            // 节点.previousElementSibling
            for(var i=0;i<leftEle.options.length;i++){
                if(leftEle.options[i].selected){
                    if(i==0){
                        return
                    }
                    leftEle.insertBefore(leftEle.options[i],leftEle.options[i].previousElementSibling);
                }
            }


        }


        function down(){
            // for(var i=0;i<leftEle.options.length;i++){
            //     if(leftEle.options[i].selected){
                // if(i==leftEle.options.length-1){
                //         return 
                //     }
            //         leftEle.insertBefore(leftEle.options[i].nextElementSibling,leftEle.options[i]);
            //         break
            //     }
            // }

            for(var i=leftEle.options.length-1;i>=0;i--){
                if(leftEle.options[i].selected){
                    if(i==leftEle.options.length-1){
                        return 
                    }
                    leftEle.insertBefore(leftEle.options[i].nextElementSibling,leftEle.options[i]);
                }
            }
        }







    </script>
</body>

</html>